<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <meta charset="UTF-8">

    <title>setTimeout</title>

    <script type="text/javascript">
        (function () {

            function get(id) {
                return document.getElementById(id);
            }

            window.onload = function () {
                /*console.log('1');
                 console.log('2');
                 //setTimeout--0 使其脱离事件文档当前状态更新，会在同级代码执行完后，才会延迟 “0”秒执行，已验证。
                 setTimeout(function () {
                 console.log('3');
                 }, 0);*/
                get('makeinput').onmousedown = function () {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'text');
                    input.setAttribute('value', 'test1');
                    get('inpwrapper').appendChild(input);
                    input.focus();
                    input.select();
                }
                get('makeinput2').onmousedown = function () {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'text');
                    input.setAttribute('value', 'test1');
                    get('inpwrapper2').appendChild(input);
                    setTimeout(function () {
                        input.focus();
                        input.select();
                    }, 0);
                }
                get('input1').onkeypress = function () {

                    get('preview1').innerHTML = this.value;
                }
                get('input2').onkeypress = function () {
                    console.log('文本框值：' + get('input2').value);
                    setTimeout(function () {
                        console.log('文本框值：' + get('input2').value);
                        get('preview2').innerHTML = get('input2').value;
                    }, 0);
                }
            }


        })();

    </script>

</head>

<body>
<h1><code>DEMO1</code></h1>

<h2>1、未使用 <code>setTimeout</code>（未选中文本框内容）</h2>
<button id="makeinput">生成 input</button>
<p id="inpwrapper"></p>

<h2>2、使用 <code>setTimeout</code>（立即选中文本框内容）</h2>
<button id="makeinput2">生成 input</button>
</h2>
<p id="inpwrapper2"></p>

--------------------------------------------------------------------------
<h1><code>DEMO2</code></h1>

<h2>1、未使用 <code>setTimeout</code>(只有输入第二个字符时，前一个字符才显示出来)</h2>
<input type="text" id="input1" value=""/>

<div id="preview1"></div>
<h2>2、使用 <code>setTimeout</code>(输入时，字符同时显示出来)</h2>

<input type="text" id="input2" value=""/>

<div id="preview2"></div>


<script>
    /*
     console.log('1');
     console.log('2');
     console.log('4');
     console.log('5');
     console.log('6');
     console.log('7');*/

    /**
     //就算是在for循环中 写setTimeout --0  也会在循环执行完后，在执行setTimeout

     for (var i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        }, 0);

    }
     */

    /**
     var isEnd = true;
     window.setTimeout(function () {
        isEnd = false;//1s后，改变isEnd的值
    }, 1000);
     //这个while永远的占用了js线程，所以setTimeout里面的函数永远不会执行
     while (isEnd);
     //alert也永远不会弹出
     alert('end');
     console.log(isEnd);*/


    /**

     window.onload = function () {
        console.log(1);

        setTimeout(function () {
            console.log(2);
        });

        console.log(3);
    }

     setTimeout(function () {
        console.log(4);
    });

     console.log(5);

     5
     1
     3
     4
     2*/

</script>

</body>

</html>

